<template>
  <div class="card">
    <md-field :title="question" class="radio-field">
      <md-radio-list
        v-model="score"
        :options="data"
        icon-size="lg"
        @change="changeRadio"
      />
    </md-field>
  </div>
</template>

<script>
import { Field, RadioList } from "mand-mobile";
export default {
  name: "questionCard",
  components: {
    [Field.name]: Field,
    [RadioList.name]: RadioList
  },
  props: {
    info: {
      type: Object
    },
    index: {
      type: Number
    }
  },
  data() {
    return {
      question: "",
      data: [],
      score: ""
    };
  },
  methods: {
    formatData() {
      this.question = this.info.question;
      this.info.answer.forEach(item => {
        let obj = {
          value: item.score,
          text: item.answer
        };
        this.data.push(obj);
      });
    },
    changeRadio(option) {
      this.$emit("change", option.value, this.index);
    }
  },
  watch: {
    info: {
      handler(val) {
        if (val) {
          this.formatData();
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style scoped lang="less">
.card {
  padding: 27px;
  background: @white;
  box-shadow: 2px 2px 10px rgba(254, 226, 212, 1);
  border-radius: 5px;
}
</style>
